<template>
  <div class="goods-list">
    <u-navbar
      title="购物列表"
      :title-style="{ 'font-weight': 'bold', 'font-size': '18px' }"
      fixed
      placeholder
      @leftClick="handleBack"
    ></u-navbar>
    <form
      action="/"
      class="form-wrap"
    >
      <u-search
        v-model="shopname"
        class="search-shop"
        placeholder="名称"
        margin="0px 12px"
        :show-action="false"
        @search="handleSearch"
      ></u-search>

      <text
        v-if="pickvalue"
        class="search-selected-status"
        @click="showPicker = true"
      >
        {{ pickvalue }}
      </text>
      <text
        v-else
        class="search-status"
        @click="showPicker = true"
      >
        请选择等级
      </text>

      <u-picker
        :show="showPicker"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      ></u-picker>
    </form>
    <div class="gl-list">
      <div class="gl-item">
        <div class="btn-wrap">
          <span class="gl-add-icon"><van-icon name="plus" /></span>
          <span
            class="gl-add-text"
            @click="clickAdd"
          >
            添加购物
          </span>
        </div>
      </div>
      <div
        v-for="(row, indx) in lists"
        :key="indx"
        class="gl-item"
        @click="clickEdit(row)"
      >
        <div class="gl-i-firstrow">
          <span>{{ getDay(row.createtime) }}</span>
          <span class="gl-firstrow-status">{{ maps[row.status] }}</span>
        </div>
        <div class="gl-i-secrow">
          <span>{{ row.shopname }}</span>
          <span>{{ getDay(row.time) }}</span>
        </div>
        <div
          v-if="row.mark"
          class="gl-i-thrrow"
        >
          {{ row.mark }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

const statusTxts = {
  1: '马上',
  2: '次要',
  3: '未来',
}

export default {
  name: 'MyList',
  layout: 'barHeight',
  data() {
    return {
      lists: [],
      maps: statusTxts,
      reverseMaps: Object.entries(statusTxts).reduce((acc, item) => {
        acc[item[1]] = item[0]
        return acc
      }, {}),
      pickvalue: '',
      showPicker: false,
      columns: [['全部', ...Object.values(statusTxts)]],
      shopname: '', // 搜索框绑定值
    }
  },

  onShow() {
    this.getdata()
  },

  methods: {
    getDay(val) {
      return dayjs(val).format('YYYY年MM月DD日')
    },
    onConfirm(args) {
      this.pickvalue = args.value[0]
      this.showPicker = false
      this.getdata()
    },
    async getdata(value) {
      const res = await this.$request.post('/shop/list', {
        pageNo: 1,
        pageSize: 200,
        status: this.reverseMaps[this.pickvalue],
        shopname: this.shopname,
      })
      this.lists = res.data || []
    },
    back() {},
    clickAdd() {
      uni.navigateTo({
        url: '/pages/add/add',
      })
    },
    // 导航栏返回
    handleBack() {
      uni.navigateBack({
        delta: 1,
      })
    },
    clickEdit(row) {
      uni.navigateTo({
        url: `/pages/add/add?shopname=${row.shopname}`,
      })
    },
    handleSearch() {
      this.getdata()
    },
    handleNavTabChange(tabName) {
      this.tab = tabName
    },
  },
}
</script>

<style lang="less" scoped>
.goods-list {
  .search-status,
  .search-selected-status {
    position: absolute;
    top: 0;
    right: 62px;
    bottom: 0;
    line-height: 34px;
    font-size: 13px;
    opacity: 0.8;
    color: #606266;
  }
  .form-wrap {
    display: flex;
    position: relative;
    margin-top: 12px;
    .search-field {
      flex: 1;
    }
    .status-field {
      width: 135px;
    }
  }
  .gl-list {
    padding: 0 12px 12px 12px;
  }
  .btn-wrap {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gl-item {
    box-shadow: 0 0 27px -14px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    margin-top: 14px;
    padding: 0 12px;
  }
  .gl-add-text {
    line-height: 17px;
    font-size: 14px;
    color: #538fff;
  }
  .gl-add-icon {
    .van-icon-plus {
      &::before {
        color: #538fff;
        font-weight: 800;
        margin-right: 2px;
      }
    }
  }
  .gl-i-firstrow {
    line-height: 17px;
    font-size: 12px;
    font-family: 'PingFang SC';
    color: #999;
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;

    border-bottom: 1px dashed #d8d8d8;
  }
  .gl-firstrow-status {
    color: #538fff;
  }
  .gl-i-secrow {
    color: black;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
  }
  .gl-i-thrrow {
    padding-bottom: 12px;
  }
  .gl-i-secrow {
    color: black;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    padding: 12px 0;
  }

  .search-selected-status {
    color: black;
  }
}
</style>
